<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
      title="拜访记录"
      :visible.sync="show"
      append-to-body
    >
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="mini"
          label-width="100px"
        >
          <el-col :span="24">
            <el-link
              href="https://lbs.qq.com/tool/getpoint/index.html"
              target="_blank"
              type="primary"
              >点击提取坐标位置</el-link
            >
          </el-col>

          <el-col :span="12">
            <el-form-item label="纬度" prop="lat">
              <el-input
                v-model="formData.lat"
                placeholder="请输入纬度"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经度" prop="lng">
              <el-input
                v-model="formData.lng"
                placeholder="请输入经度"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="上传" prop="photoFile" required>
              <el-upload
                ref="photoFile"
                :file-list="photoFilefileList"
                :action="photoFileAction"
                :before-upload="photoFileBeforeUpload"
                list-type="picture-card"
                :limit="1"
                :on-success="handleUploadSuccess"
                :on-remove="handleRemove"
                :headers="headers"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formData.remark"
                type="textarea"
                placeholder="请输入备注"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="拜访内容" prop="content">
              <el-input
                v-model="formData.content"
                type="textarea"
                placeholder="请输入拜访内容"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button size="mini" @click="close">取消</el-button>
        <el-button size="mini" type="primary" @click="handleConfirm"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { runVisitPlan } from "@/api/visit/visit";

export default {
  inheritAttrs: false,
  components: {},
  props: [],
  data() {
    return {
      show: false,
      formData: {
        lat: undefined,
        lng: undefined,
        photoFile: null,
        remark: undefined,
        content: undefined,
        visitPlanId: "",
      },
      rules: {
        lat: [
          {
            required: true,
            message: "请输入纬度",
            trigger: "blur",
          },
        ],
        lng: [
          {
            required: true,
            message: "请输入经度",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
        photoFile: [
          {
            required: true,
            message: "请上传附件",
            trigger: "change",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入拜访内容",
            trigger: "blur",
          },
        ],
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      photoFileAction:
        "http://business.byteturing.com" +
        process.env.VUE_APP_BASE_API +
        "/common/upload",
      photoFilefileList: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    showDialog(id) {
      this.show = true;
      this.formData.visitPlanId = id;
    },
    onOpen() {},
    onClose() {
      this.$refs["elForm"].resetFields();
    },
    close() {
      this.$emit("update:visible", false);
      this.show  = false
    },
    handleConfirm() {
      this.$refs["elForm"].validate((valid) => {
        console.log(valid, '=')
        if (!valid) return;

        runVisitPlan(this.formData).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          // this.$router.replace("/visit/visit/list");
        });

        this.close();
      });
    },
    photoFileBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 100;
      if (!isRightSize) {
        this.$message.error("文件大小超过 100MB");
      }
      return isRightSize;
    },
    handleUploadSuccess(res, file) {
      this.formData.photoFile = res.fileId;
    },
    handleRemove() {
      this.formData.photoFile = "";
    },
  },
};
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>
